import { login } from '@/apis/login'
import { ComponTypeEnum } from '@/layout/BasicLayout'
import { storeGlobalUser } from '@/store/globalUser'
import { storage } from '@/utils/Storage'
import md5 from 'js-md5'
import arcoIcon from '@/assets/Arco.png'
import {
  AlipayOutlined,
  LockOutlined,
  MobileOutlined,
  TaobaoOutlined,
  UserOutlined,
  WeiboOutlined
} from '@ant-design/icons'
import {
  LoginFormPage,
  ProFormCaptcha,
  ProFormCheckbox,
  ProFormText
} from '@ant-design/pro-components'
import { RouteType } from '@config/routes'
import { Button, Divider, message, Space, Tabs } from 'antd'
import type { CSSProperties } from 'react'
import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'

type LoginType = 'phone' | 'account'

const iconStyles: CSSProperties = {
  color: 'rgba(0, 0, 0, 0.2)',
  fontSize: '18px',
  verticalAlign: 'middle',
  cursor: 'pointer'
}

const Login = () => {
  const [loginType, setLoginType] = useState<LoginType>('account')
  const navigate = useNavigate()
  useEffect(() => {
    storage.clear()
    storage.remove('SHOWMSG')
  },[])
  return (
    <div style={{ backgroundColor: 'white', height: '100vh' }}>
      <LoginFormPage
        backgroundImageUrl="https://gw.alipayobjects.com/zos/rmsportal/FfdJeJRQWjEeGTpqgBKj.png"
        logo={arcoIcon}
        title="羽急管理后台 v1.1.0"
        subTitle="登陆入口"
        onFinish={async (val: Login.LoginEntity) => {
          try {
            // 加密密码
            val.password = md5(val.password)
            const res = await login(val)
            if (res?.errCode === 0) {
              storage.set('token', res.data.adminToken)
              storage.set('userId', res.data.adminUserID)
              await storeGlobalUser.getUserDetail(res.data.adminUserID)
              storeGlobalUser.setToken(res.data.adminToken)
              navigate('/home')
              // setTimeout(() => {
              //     window.location.reload()
              // }, 200);
            } else {
              console.error('登录失败:', res?.errMsg || '未知错误')
            }
          } catch (error) {
            console.error('登录异常:', error)
          }

          //   val.password = md5(val.password)
          //   const res = await login(val)
          //   storage.set('token', res.data.adminToken)
          //   /** 跳转有权限的第一个菜单 */
          //   await storeGlobalUser.getUserDetail(res.data.adminUserID)
          //   console.log('Navigating to /home');
          //   const flattenRoutes: (routes: RouteType[]) => RouteType[] = (routes: RouteType[]) => {
          //     const flattenedRoutes: RouteType[] = []
          //     function traverse(routes: RouteType[]) {
          //       routes.forEach(route => {
          //         flattenedRoutes.push(route)
          //         if (route.children) {
          //           traverse(route.children)
          //         }
          //       })
          //     }
          //     traverse(routes)
          //     return flattenedRoutes
          //   }
          //   const resRoutes = flattenRoutes(routers)
          //   const findPath =
          //     resRoutes?.[
          //       resRoutes?.findIndex(
          //         item =>
          //           item?.name ===
          //           storeGlobalUser?.userInfo?.menus?.filter(
          //             citem => citem?.type === ComponTypeEnum.MENU
          //           )?.[0]?.title
          //       )
          //     ]?.path
          //   navigate(findPath || '/')
        }}
        activityConfig={{
          style: {
            boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.2)',
            color: '#fff',
            borderRadius: 8,
            backgroundColor: '#1677FF'
          },
          title: '活动标题，可配置图片',
          subTitle: '活动介绍说明文字',
          action: (
            <Button
              size="large"
              style={{
                borderRadius: 20,
                background: '#fff',
                color: '#1677FF',
                width: 120
              }}
            >
              跳转链接
            </Button>
          )
        }}
        actions={
          <div
            style={{
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              flexDirection: 'column'
            }}
          ></div>
        }
      >
        <>
          {/* <p>chatAdmin</p> */}
          <ProFormText
            name="account"
            fieldProps={{
              size: 'large',
              prefix: <UserOutlined className={'prefixIcon'} />
            }}
            placeholder={'请输入用户名'}
            rules={[
              {
                required: true,
                message: '请输入用户名'
              }
            ]}
          />
          <ProFormText.Password
            name="password"
            fieldProps={{
              size: 'large',
              prefix: <LockOutlined className={'prefixIcon'} />
            }}
            placeholder={'请输入密码'}
            rules={[
              {
                required: true,
                message: '请输入密码'
              }
            ]}
          />
        </>
        <div
          style={{
            marginBlockEnd: 24
          }}
        >
          <ProFormCheckbox noStyle name="autoLogin">
            自动登录
          </ProFormCheckbox>
          <a
            style={{
              float: 'right'
            }}
          >
            忘记密码
          </a>
        </div>
      </LoginFormPage>
    </div>
  )
}

export default Login
